<div style="height: 400px;">
  <div class="w-all h-all prel" style="padding:0 40px 0 150px;" data-id="monitor_certificate">
      <div class="w-all h-all bdd" style="padding-top:20px;margin-bottom:30px;">
          <div class="tab-content">
            <!-- tab1 -->
            <div class="tab-pane" id="tab_telnet">
              <form class="bs-example form-horizontal xs-form form-plr5">
                <div class="form-group">
                  <label class="col-lg-2 control-label">用户名</label>
                  <div class="col-lg-3" data-id="snmp">
                    <input type="text" class="form-control input-sm" data-id="monitorUserName" />
                  </div>
                  <label class="col-lg-2 control-label">密码</label>
                  <div class="col-lg-3" data-id="snmp">
                    <input type="text" class="form-control input-sm" data-id="monitorPassWord" />
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-lg-2 control-label">命令行提示符</label>
                  <div class="col-lg-3" data-id="snmp">
                    <input type="text" class="form-control input-sm" data-id="commandPrompt" />
                  </div>
                  <label class="col-lg-2 control-label">登录提示符</label>
                  <div class="col-lg-3" data-id="snmp">
                    <input type="text" class="form-control input-sm" data-id="loginPrompt" />
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-lg-2 control-label">密码提示符</label>
                  <div class="col-lg-3" data-id="snmp">
                    <input type="text" class="form-control input-sm" data-id="passwordPrompt" />
                  </div>
                  <label class="col-lg-2 control-label">端口号</label>
                  <div class="col-lg-3" data-id="snmp">
                    <input type="text" class="form-control input-sm" data-id="monitorPort"
                          validate="number"/>
                  </div>
                </div>
                <div class="form-group" id="show_for_ztc_web_equ" style="display: none;">
                  <label class="col-lg-2 control-label">查询方式</label>
                  <div class="col-lg-3" data-id="snmp">
                    <select class="form-control input-sm" data-type="select">
                    	<option value="option 1">一般信息</option>
                    	<option value="option 2">详细信息</option>
                    </select>
                  </div>
                </div>
                <div class="form-group" id="show_for_EMC_VMAX10k" style="display: none;">
                  <label class="col-lg-2 control-label">SID</label>
                  <div class="col-lg-3" data-id="snmp">
                    <input type="text" class="form-control input-sm" data-id="monitorPort"
                          validate="number"/>
                  </div>
                </div>
              </form>
            </div>
            <!-- tab2 -->
            <div class="tab-pane" id="tab_ssh">
              <form class="bs-example form-horizontal xs-form form-plr5">
                <div class="form-group">
                  <label class="col-lg-2 control-label">用户名</label>
                  <div class="col-lg-3" data-id="snmp">
                    <input type="text" class="form-control input-sm" data-id="monitorUserName" />
                  </div>
                  <label class="col-lg-2 control-label">密码</label>
                  <div class="col-lg-3" data-id="snmp">
                    <input type="text" class="form-control input-sm" data-id="monitorPassWord" />
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-lg-2 control-label">端口号</label>
                  <div class="col-lg-3" data-id="snmp">
                    <input type="text" class="form-control input-sm"
                      data-id="monitorPort" validate="number"/>
                  </div>
                </div>
              </form>
            </div>
          </div>
          <div class="database">
					  <form class="bs-example form-horizontal xs-form form-plr5">
					    <div class="form-group">
					      <label class="col-lg-2 control-label">用户名</label>
					      <div class="col-lg-3" data-id="snmp">
					        <input type="text" class="form-control input-sm" data-id="monitorUserName" />
					      </div>
					      <label class="col-lg-2 control-label">密码</label>
					      <div class="col-lg-3" data-id="snmp">
					        <input type="text" class="form-control input-sm" data-id="monitorPassWord" />
					      </div>
					    </div>
					    <div class="form-group">
					      <label class="col-lg-2 control-label">数据库实例名</label>
					      <div class="col-lg-3" data-id="snmp">
					        <input type="text" class="form-control input-sm" data-id="monitorPort" validate="number"/>
					      </div>
					      <label class="col-lg-2 control-label">端口号</label>
					      <div class="col-lg-3" data-id="snmp">
					        <input type="text" class="form-control input-sm" data-id="monitorPort" validate="number"/>
					      </div>
					    </div>
					    <div class="form-group">
					      <div class="col-lg-10">
					          <div class="table-oper">
					              <a href="javascript:void(0);" data-type="test_btn">
					                <span>测试</span>
					              </a>
					          </div>
					      </div>
					    </div>
					  </form>
          </div>
      </div>
      <ul class="pabs v-ul" data-id="tab-ul" style="top:0;left:70px;width:80px">
          <li>TELNET</li>
          <li>SSH2</li>
      </ul>
  </div>
</div>


<script>
$(document).ready(function(){
require(["js/plugin/tab/tab.js"] ,function(tab) {
  $.ajax({
    type : "GET",
    url : "tpl/monitor/monitor_certificate_tpl.html",
    success : function(data) 
    {
      $("[data-id="+$("[data-id=temp_name]").val()+"]").one(function(){
        $("[data-id="+$("[data-id=temp_name]").val()+"]").append(data);
      });
      tab.tab($("[data-id="+$("[data-id=temp_name]").val()+"]") ,{
        oper : [],
      });

      $("[data-id=snmpVersion]").change(function (){
        var id = $(this).val();
        if (id == "1" || id == "2")
        {
          $("[data-id=show_for_snmp_v1]").show();
          $("[data-id=show_for_snmp_v3]").hide();
        }
        else
        {
          $("[data-id=show_for_snmp_v1]").hide();
          $("[data-id=show_for_snmp_v3]").show();
        }
      });

      ($("[data-id=tab-ul]>li.active").html() === "SNMP")
      ? $("[data-id=temp_show_index_for_ssh]").val("hide")
      : $("[data-id=temp_show_index_for_ssh]").val("show");

      $("[data-id=tab-ul]>li").click(function(){
        ($("[data-id=tab-ul]>li.active").html() === "SNMP")
        ? $("[data-id=temp_show_index_for_ssh]").val("hide")
        : $("[data-id=temp_show_index_for_ssh]").val("show");
      });
    }
  });
});
});
</script>